.chart-token-selector {
  border: none;
  background: transparent;
  color: var(--color-white);
  font-size: 2rem;
  display: inline-flex;
  align-items: center;
  padding: 0.5rem;
  border-radius: var(--border-radius-sm);

  &:hover {
    color: var(--color-blue-300);
    span {
      color: var(--color-blue-300);
    }
  }
}

.chart-token-label--active {
  color: var(--color-blue-300);
  span {
    color: var(--color-blue-300);
  }
}

.chart-token-selector--current {
  font-weight: 700;
  margin-right: 1rem;
  color: var(--color-white);
  vertical-align: bottom;

  .chart-token-current-icon {
    margin-right: 0.75rem;
  }
}

.chart-token-menu-items.menu-items {
  max-width: 45rem;
  top: 6.8rem;
  right: unset;
  left: 0;
  cursor: auto;
}

.chart-token-menu-items .menu-item {
  font-size: var(--font-sm);
  height: 3.4rem;
  color: var(--color-slate-100);
}

.chart-token-list {
  overflow-x: auto;
  max-height: 20rem;
  padding-bottom: 1rem;

  table {
    width: 100%;
    text-align: left;
    font-size: var(--font-sm);
    border-collapse: collapse;
  }
  thead {
    display: table-header-group;
    position: sticky;
    top: 0;
    background: var(--color-slate-800);
    tr {
      th {
        padding: 0.75rem 1.5rem;
        font-weight: normal;
        letter-spacing: 0.25px;
        color: var(--color-gray-400);
        text-transform: uppercase;
      }
    }
  }

  tbody {
    .Swap-token-list {
      background-color: var(--dark-blue-bg);
      border-radius: var(--border-radius-sm);
      cursor: pointer;
      &:hover {
        background-color: var(--dark-blue-hover);
        border-radius: var(--border-radius-sm);
      }
      td {
        padding: 0.75rem 1.5rem;
        white-space: nowrap;
        font-weight: 400;

        &.token-item {
          color: var(--color-slate-100);

          .ChartToken-list-icon {
            margin-right: 0.75rem;
          }
        }
      }
    }
    .Position-token-list {
      background-color: var(--dark-blue-bg);
      border-radius: var(--border-radius-sm);
      td {
        padding: 0.75rem 1.5rem;
        white-space: nowrap;
        font-weight: 400;
        cursor: pointer;

        &:hover {
          background-color: var(--dark-blue-hover);
          border-radius: var(--border-radius-sm);
        }

        &.token-item {
          color: var(--color-slate-100);

          .ChartToken-list-icon {
            margin-right: 0.75rem;
          }
        }
      }
    }
  }
}

@media (max-width: 1100px) {
  .chart-token-menu-items.menu-items {
    top: 5.05rem;
  }
}

@media (max-width: 380px) {
  .chart-token-selector {
    font-size: 1.6rem;
  }
}
